<template>
    <div class="app-container">

        <div class="page-header">
            <!-- <router-link class="back-link" to="/main/renshi/renshizhidu/xdlaodonght/xdlaodonght">
                <i class="el-icon-arrow-left"></i>
                返回
            </router-link> -->
            <el-button type="primary" style="margin-right: 20px;"
                @click="$router.push('/main/renshi/renshizhidu/xdlaodonght/xdlaodonght')"
                icon="el-icon-back">返回</el-button>

            <h2>续订劳动合同通知书列表</h2>
        </div>

        <!-- 搜索区域 -->
        <div class="filter-container">
            <el-input v-model="listQuery.applicant" placeholder="员工姓名" style="width: 200px;" class="filter-item" />
            <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
            <el-button class="filter-item" type="primary" @click="handleCreate">新增</el-button>
            <el-button class="filter-item" type="danger" @click="handleBatchDelete">批量删除</el-button>
            <!-- <el-button class="filter-item" type="primary" @click="goBack">返回</el-button> -->
        </div>

        <!-- 表格区域 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column label="员工姓名" prop="applicant" width="180" />
            <el-table-column label="身份证号" prop="idNumber" />
            <el-table-column label="合同到期日期" width="120">
                <template slot-scope="scope">
                    {{ formatDate(scope.row.contractEndDate) }}
                </template>
            </el-table-column>
            <el-table-column label="续签开始日期" width="120">
                <template slot-scope="scope">
                    {{ formatDate(scope.row.renewStartDate) }}
                </template>
            </el-table-column>
            <el-table-column label="续签结束日期" width="120">
                <template slot-scope="scope">
                    {{ formatDate(scope.row.renewEndDate) }}
                </template>
            </el-table-column>
            <el-table-column label="是否同意续签" prop="isAgreeRenew" width="110" />
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleView(scope.row)">查看</el-button>
                    <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size"
            @pagination="getList" />
    </div>
</template>

<script>
import { getRenewContractNoticePage, getRenewContractNoticeById, saveRenewContractNotice, deleteRenewContractNotice, batchDeleteRenewContractNotice } from '@/api/renewContractNotice'
import Pagination from '@/components/Pagination'

export default {
    name: 'RenewContractNoticeList',
    components: { Pagination },
    data() {
        return {
            list: [],
            total: 0,
            listLoading: false,
            listQuery: {
                current: 1,
                size: 10,
                applicant: ''
            },
            multipleSelection: []
        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            this.listLoading = true
            getRenewContractNoticePage(this.listQuery).then(response => {
                this.list = response.data.records
                this.total = response.data.total
                this.listLoading = false
            })
        },
        handleFilter() {
            this.listQuery.current = 1
            this.getList()
        },
        handleCreate() {
            this.$router.push('/main/renshi/renshizhidu/xdlaodonght/xdlaodonght')
        },
        handleView(row) {
            this.$router.push({
                path: '/main/renshi/renshizhidu/xdlaodonght/xdlaodonght',
                query: { id: row.id, type: 'view' }
            })
        },
        handleEdit(row) {
            this.$router.push({
                path: '/main/renshi/renshizhidu/xdlaodonght/xdlaodonght',
                query: { id: row.id, type: 'edit' }
            })
        },
        handleDelete(row) {
            this.$confirm('确认删除该记录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteRenewContractNotice(row.id).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.getList()
                })
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        handleBatchDelete() {
            if (this.multipleSelection.length === 0) {
                this.$message({
                    message: '请选择要删除的记录',
                    type: 'warning'
                })
                return
            }
            this.$confirm('确认删除选中的记录?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const ids = this.multipleSelection.map(item => item.id)
                batchDeleteRenewContractNotice(ids).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                    this.getList()
                })
            })
        },
        formatDate(date) {
            if (!date) return ''
            const d = new Date(date)
            return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
        },
        goBack() {
            this.$router.push('/main/renshi/renshizhidu')
        }
    }
}
</script>

<style scoped>
.app-container {
    padding: 20px;
    /* background-color: #f5f7fa; */
    border-radius: 8px;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
    min-height: calc(100vh - 40px);
    width: 1200px;
    margin: 0 auto;
}

/* 页面头部样式 */
.page-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* 返回链接样式 */
.back-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #409EFF;
    font-size: 16px;
    margin-right: 20px;
    transition: all 0.3s;
}

.back-link i {
    margin-right: 5px;
}

.back-link:hover {
    opacity: 0.8;
}

/* 标题样式 */
.page-header h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    color: #303133;
}

.filter-container {
    padding-bottom: 10px;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 20px 0px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.filter-item {
    margin-right: 10px;
}
</style>